const ownEach = function(targetObj,callback){
	if(typeof targetObj !== "object") throw new TypeError("targetObj is not a object");
	if(typeof callback !== "function") throw new TypeError("callback is not a function");
	Reflect.ownKeys(targetObj).forEach(key=>{
		callback(targetObj[key],key)
	})
}
const React = {
	// 1-标签的名字，
	// 2-属性，
	// 3-包裹的内容，
	createElement(type,props,...children){
		// 判断type(标签名)是否合法
		if(typeof type !== "string") throw new TypeError("type is not a string");
		// 判断接收的属性是否合法
		if(typeof props !== "object") throw new TypeError("props is not a object");
		// 对 props 进行复制，如果props为null,那么将其值更改为{}
		props = {...(props ?? {})};
		// props.children 有可能是一个数组。
		// 得到children数组的长度
		const len = children.length;
		if(len===1) props.children = children[0];
		else if(len >1) props.children = children;
		// createElement("div",null,"abc","abc");// {props:{children:["abc","abc"}}
		const virDOM = {
			$$typeof:Symbol("React.element"),
			key:null,
			ref:null,
			type,
			props
		};
		return virDOM;
	},
	render(virDOM,container){
		// type是标签名字，props是属性
		const {type,props} = virDOM;
		// 根据标签名创建DOM元素
		const ele = document.createElement(type);
		ownEach(props,(value,key)=>{
			if(key === "style"){
				Object.assign(ele.style,value);
			}
			if(key === "className"){
				ele.className = value;
			}
			// 判断是否有包裹的内容
			if(key === "children"){
				let children = value;
				if(!Array.isArray(children)) children = [children];
				children.forEach(child=>{
					if(["number","string"].includes(typeof child)){
						ele.appendChild(document.createTextNode(child));
					}else React.render(child,ele);
				})
			}
		})
		container.appendChild(ele);
	}
};
const {createElement} = React;
// export const {createElement} = React;
// export default React;

export {
	React as default,// 相当于 export default React;
	createElement// export const {createElement} = React;
}